<template>
    <div class="body">
        <div class="login-content">
            <div class="input-content"  v-if="!uname">
                <input type="password" v-model="uid" placeholder="请扫描志愿者二维码绑定"  @keyup.enter="getUid">
            </div>
            <div v-else class="bind">
                    已绑定志愿者:{{uname}}
                    <mt-button @click="()=>{uname='';uid=''}">解绑</mt-button>
            </div>
            <div class="input-content" v-if="uname">
                <input type="number" autofocus v-model="order_code" placeholder="请扫描订单二维码" @keyup.enter="bind">
                <!-- <button @click="getOrderCode">提交</button> -->
            </div>
        </div>
        <div class="btn-group all-btn">
            <mt-button size='large' type="danger" plain @click="()=>{popupVisible = !popupVisible;dormitoryOrder()}"><i class="iconfont icon-daiqujian"></i>待取订单</mt-button>
            <mt-button size='large' type="danger" plain @click.native="()=>{$router.push('/historyOrder')}"><i class="iconfont icon-lishi"></i>历史订单</mt-button>
            <mt-button size='large' type='danger' plain @click="()=>{this.scan(1 )}"><i class="iconfont icon-ziti"></i>箱子自提</mt-button>
            <!-- <mt-button size='large' type="danger" plain @click="()=>{type=0;this.scan()}"><i class="iconfont icon-saomiao"></i>扫描出箱</mt-button> -->
            <mt-button size='large' type="danger" plain @click="()=>{this.scan(3)}"><i class="iconfont icon-chehui"></i>整箱撤回</mt-button>
            <mt-button size="large" plain type="danger" @click.native="loginOut"><i class="iconfont icon-Group"></i>退出登录</mt-button>
        </div>
        <mt-popup
        v-model="popupVisible"
        position="top"
        class="order-content">
            <mt-cell v-for="(item,index) of orderList.data" :key="index" :title="item.order_no" :value="item.name"/>
        </mt-popup>
    </div>
</template>
<script>
import {getName,bindingOrder,boxUse,boxDel,wxSign,DormitoryOrder} from '../api'
import {Toast,MessageBox} from 'mint-ui'
import cookie from '../cookie'
import wxScan from '../wxScan';
export default {
    data() {
        return {
            uid:'',
            uname:'',
            order_code:'',
            orders:[],
            popupVisible:false,
            box_code:'',
            type:0,
            orderList:[]
        }
    },
    created(){
        this.roleinfo = JSON.parse(cookie.get('data','roleinfo'));
    },
    methods:{
        scan(type){
            const data = {
              token:cookie.get('data','token'),
              url:window.location.href.split('#')[0],
              id:this.roleinfo.id
          }
        //   console.log(data);
          wxSign(data).then(res=>{
              wxScan.wxRegister(res.data).then(res=>{
                this.box_code = res.resultStr;
                this.getCode(type);
              }).catch(err=>{
                Toast('扫描失败,请重试');
              })
          })
        },
        getUid(){
            // console.log(this.uid);
            const data = {
                token:cookie.get('data','token'),
                id:this.uid
            }
            getName(data).then(res=>{
                // this.uid = '';
                // console.log(res.data);
                Toast(res.msg);
                if(res.code == 200){
                    if(!res.data){
                        Toast("不存在该用户，请核对后绑定");
                    return;
                    }
                    MessageBox.confirm(`即将与志愿者${res.data}绑定,确认绑定?`).then(action => {
                        this.uname = res.data;
                    });
                }
            })
        },
        getCode(type){
            const {box_code} = this;
            if(box_code.length!==20){
                Toast("请扫描正确的二维码");
                return;
            }
            const data = {
                type,
                code:box_code,
                token:cookie.get('data','token')
            }
            boxUse(data).then(res=>{
                // console.log(res);
                if(res.code == 200){
                    Toast(res.msg);
                    // this.type = 0;
                    // this.setBox();
                }else{
                    Toast('修改失败，请重新再试');
                }
                this.code = '';
            })
        },
        dormitoryOrder(){
            const data = {
                token:cookie.get('data','token'),
                manag_id:this.roleinfo.id
            }
            DormitoryOrder(data).then(res=>{
               this.orderList = res.data;
            })
        },
        // delItem(i){
        //     // console.log(i);
        //     let index = this.orders.indexOf(i);
        //     if (index > -1) {
        //         this.orders.splice(index, 1);
        //     }
        // },
        // getOrderCode(){
        //     let i = this.orders.indexOf(this.order_code);
        //     if(i !== -1){
        //         Toast("该订单重复，请勿重复扫描");
        //         this.order_code = "";
        //         return;
        //     }
        //     this.orders.push(this.order_code);
        //     this.order_code = '';
        //     // console.log(this.orders);
        // },
        // setBox(){
        //     if(!this.type){
        //         if( this.box_code.length !== 20 || this.box_code.length == 0){
        //             Toast({
        //                 message:"错误箱子二维码，请核对后再试",
        //                 position:"bottom"
        //             })
        //             this.box_code = '';
        //             return;
        //         }
        //         const data = {
        //             code:this.box_code,
        //             type:1,
        //             status:0,
        //             token:cookie.get('data','token'),
        //             school_id:this.roleinfo.school_id
        //         }
        //         boxUse(data).then(res=>{
        //                 Toast({
        //                     message:res.msg,
        //                     position:"bottom"
        //                 });
        //                 this.box_code = '';
        //         })
        //     }else{
        //         const data = {
        //             code:this.box_code,
        //             token:cookie.get('data','token')
        //         }
        //         boxDel(data).then(res=>{
        //             Toast(res.msg);
        //             this.box_code = '';
        //         })
        //     };
        // },
        bind(){
            if(!this.order_code){
                Toast('请输入订单编号');
                return;
            }
            const data = {
                token:cookie.get('data','token'),
                order_no:this.order_code,
                send_id:this.uid,
                manag_id:this.roleinfo.id
            }
            bindingOrder(data).then(res=>{
                Toast(res.msg);
                this.order_code = "";
            })
        },
        loginOut(){
            cookie.unsetAll('data');
            this.$router.push('/');
        }
    }
}
</script>
<style scoped>
       .body{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    .bind{
        line-height: 5rem;
    }
    .btn-group{
        width: 100%;
    }
    .btn-group button{
        margin-top: 1rem;
    }
    .box-content{
        padding: 1rem;
        /* width: 6rem; */
    }
    .all-btn{
        display: flex;
        align-items: center;
        justify-content: start;
        flex-wrap: wrap;
    }
    .all-btn button{
        width: Calc(100% / 3);
        height: 6rem;
        border-radius: 0;
        border-width: 0;
        border-color: #F23D3D;
        border-right-width: 0.1rem;
        border-bottom-width: 0.1rem;
        margin: 0;
    }
    .all-btn button .iconfont{
        margin: 0.2rem;
    }
    .all-btn button:nth-child(3n){
        border-right: 0;
    }
    .all-btn button:nth-child(-n+3){
        border-top-width: 0.1rem;
    }
    .order-content{
        max-height: 12rem;
        width: 100%;
        overflow-y: auto;
    }
</style>